<!doctype html>
<html ng-app>
  <head>

    <link rel="stylesheet" href="css/todo.css">
  </head>
  <body>
    <div ng-controller="TopBarCtrl">
      <div>
      <a class="menuelement" href="" ng-click="choosePlayer()">{{currentPlayer.name}}</a>
      <a class="menuelement" href="{{logOutUrl}}">LOG OUT</a>
      <ul class="unstyled" id="playermenu">
        <li class="menuelement"><a href="" ng-click="createPlayer()">NY SPELARE</a></li>
        <li ng-repeat="player in players" class="menuelement">
          <a href="" ng-click="selectedPlayer(player.name)">{{player.name}}</a>
        </li>
      </ul>
      </div>
	    <div id="frstr" style="width:{{frstr_style.width}}">
	      <span ng-click="click_frstr()">FRSTR</span>
	      <div style="display: {{frstr_style.display}};">
	    	
	    	Info om andra spelare
	    	  <form name="searchplayer">
			    <input id="searchedplayer" name="input" ng-model="searchedplayer" required ng-change="change_player_name()">
			  </form>
              <ul id="playersearchresult">
		         <li ng-click="show_player(playername.id)" class="menuelement" ng-repeat="playername in searchedplayerlist">
        		   {{playername.name}}
        		</li>
       	     </ul>
       	     <div ng-show="playerinfo.id">
       	       <ul>
	             <li>{{playerinfo.name}}</li>
	             <li>{{playerinfo.date}}</li>
	             <li>{{playerinfo.id}}</li>
	           </ul>
	           <form ng-submit="submit_message()">
	             <textarea ng-model="message_text" name="message_text" ></textarea>
      			 <input type="submit" id="message_submit" value="Submit" />
	           </form>
	         </div>
	      </div>

	    </div>    
	    <div id="playercreator">
	      Skapa spelare i Fursten!
		<form method="post" action="/playerform" id="playerdataform">
		  <p class="choose_text">
		      Spelarens namn
		  </p>
		  <input id="name" name="name" />
		   <br>
	       <p class="choose_text">
	       Spelarens flagga
	       </p>
	      <canvas id="flag_selecting" style="background:#{{selectedColor}};" width="160" height="100"></canvas>
	      <div id="flag_selectors">
	   	  <ul id="select_color">
	        <li ng-repeat="color in flag_colors">
	          <canvas id="{{color.color}}" style="background: #{{color.color}}; border:{{color.selected}};" ng-click="clickColor()" width="40" height="25">
	          </canvas>
	        </li>
	      </ul>
	   	  <ul id="select_cross">
	        <li ng-repeat="cross in cross_types">
	          <canvas id="{{cross.name}}" style="border:{{cross.selected}};" ng-click="clickCross()" width="40" height="25">
	          </canvas>
	        </li>
	      </ul>
	      </div>
	      <input id="sub" type="submit" value="GO!" />
		  </form>
	    </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="js/drawFlags.js"></script>
    <script src="js/todo.js"></script>

  </body>
</html>